<!-- 人气榜数据 -->
<template>
  <div class="gl_contentBox gl_heightFull" style="padding: 0">
    <div v-loading="loading" class="gl_padding_15">
      <div class="gl_searchBox gl_mt_5 gl_mb_15">
        <el-row :gutter="20">
          <el-col :span="8" :lg="6">
            <p>统计时间</p>
            <el-date-picker
              v-model="filterDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="mini"
              :clearable="false"
              @change="handleTimeChange"
            />
          </el-col>
          <el-col :span="16" :lg="18" align="right">
            <el-button style="margin-top: 27px" type="primary" size="mini" @click="getData()">查询</el-button>
            <el-button style="margin-top: 27px" type="warning" size="mini" @click="initForm()">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="15">
        <template v-for="(item, index) in detailsList">
          <el-col v-if="index < 2" :key="index" :span="5">
            <div class="box" :style="{ background: item.bgColor }">
              <p class="gl_mb_15 gl_fs_14">{{ item.name }}</p>
              <p style="color: #f59a23;">{{ item.sum }}</p>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
    <div class="popular_data gl_padding_15">
      <el-tabs v-model="activeName" type="card">
        <template v-for="(item, index) in tabsList">
          <el-tab-pane :key="index" :label="item.name" :name="item.code">
            <component :is="item.component" :ref="item.code" :form="form" />
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import sessionData from './sessionData/sessionData.vue';
import { api_GET_EventsManagementPopularityPopularityStatistic } from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementPopularityPopularityStatisticQO
} from '@/lib/form/game/swaggerForm.js';

export default {
  data () {
    return {
      loading: false,
      filterDate: [], // 统计时间
      form: new Api_GET_EventsManagementPopularityPopularityStatisticQO(),
      qo: {},
      detailsList: [
        {
          code: 'totalSession',
          name: '人气榜总场次',
          sum: 167,
          bgColor: '#f9ece6'
        },
        {
          code: 'totalMoney',
          name: '人气榜总金额',
          sum: 12236.81,
          bgColor: '#e5f2e6'
        }
      ],
      activeName: 'session',
      tabsList: [
        {
          name: '人气榜场次数据',
          code: 'session',
          component: sessionData
        }
      ]
    };
  },
  created() {
    this.initForm();
  },
  methods: {
    // 获取数字信息
    getData() {
      var that = this;
      that.loading = true;
      api_GET_EventsManagementPopularityPopularityStatistic(that.form).then(res => {
        that.loading = false;
        that.detailsList[0].sum = res.competitionCount;
        that.detailsList[1].sum = res.amount ? that.formatMoney(res.amount) : '0.00';
        this.$nextTick(() => {
          that.$refs[that.activeName][0].getPageList();
        });
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取人气榜统计数据失败！' + (error.error && error.error.message || '') });
      });
    },
    // 初始
    initForm() {
      const day1 = this.handleDate(-30, '-');
      const day2 = this.handleDate(0, '-');
      this.filterDate = [day1, day2];
      this.form.startTime = day1;
      this.form.endTime = day2;
      this.getData();
    },
    // 处理初始的统计时间
    handleDate (num, str) {
      var today = new Date();
      var nowTime = today.getTime();
      var ms = 24 * 3600 * 1000 * num;
      today.setTime(parseInt(nowTime + ms));
      var oYear = today.getFullYear();
      var oMoth = (today.getMonth() + 1).toString();
      if (oMoth.length <= 1) oMoth = '0' + oMoth;
      var oDay = today.getDate().toString();
      if (oDay.length <= 1) oDay = '0' + oDay;
      return oYear + str + oMoth + str + oDay;
    },
    // 处理时间筛选项
    handleTimeChange(time) {
      this.form.startTime = time && time[0];
      this.form.endTime = time && time[1];
      this.getData();
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  height: 114px;
  padding: 20px 26px;
  color: #000;
  font-size: 30px;
  display: inline-block;
}
.box p {
  text-align: center;
}
.el-divider--horizontal {
  margin: 15px 0;
}
</style>
